import React from "react";
import {StyleSheet, Text, TextInput, View} from "react-native";

type InputFormProp = {
    startText:string
    editable?:boolean
    defaultValue?:string
    onChangeInput:(text:string)=>void
}

type InputFormState = {
    text:string
    editable:boolean
}

export default class InputForm extends React.Component<InputFormProp, InputFormState> {
    constructor(props:any) {
        super(props);

        this.state = {
            text:this.props.defaultValue || '',
            editable:(this.props.editable === undefined || this.props.editable === true)
        }
    }

    render() {
        return (
            <View>
                <View style={inputFormStyles.container}>
                    <View style={inputFormStyles.startTextContainer}><Text style={inputFormStyles.startText}>{this.props.startText}</Text></View>
                    <View style={[inputFormStyles.inputContainer,{backgroundColor:this.state.editable?'#fff':'#eee'}]}>
                        <TextInput
                            editable={this.state.editable}
                            value={this.state.text}
                            style={inputFormStyles.input}
                            onChangeText={(text)=>{this.setState({text:text});this.props.onChangeInput(text)}} />
                    </View>
                </View>
            </View>
        )
    }
}


const inputFormStyles = StyleSheet.create({
    container: {
        flexDirection:'row',
        marginTop:4,
        marginBottom:4
    },
    startTextContainer:{
        flexDirection:'row',
        width:92,
        height:40,
        justifyContent:'flex-end',
        alignItems:'center'
    },
    startText:{
        marginRight:4,
        textAlign:'right'
    },

    inputContainer:{
        flexDirection:'row',
        flex:1,
        height:40
    },

    input:{
        flex:1,
        height:40,
        textAlign:'right',
        borderRadius:4,
        marginRight:4
    },
    faceBtn:{
        width: 24,
        height: 24,
        marginLeft:4,
        marginRight:4
    },
    faceContainer:{
        flexDirection:'row',
        flexWrap:'wrap',
        alignItems:'flex-end',
        borderWidth:0.01,
    },
    face:{
        width: 24,
        height: 24,
        marginTop:2,
        marginBottom:2,
        marginLeft:4,
        marginRight: 4
    }
});
